import React, { Component } from 'react';

let titleStyle = {
    height:"40px",
    lineHeight:"40px",
    textAlign:"center",
    fontSize:"12px",
    backgroundColor:"white"
};


export default class OptionItem extends Component{
    constructor(props){
        super(props);
        this._myclick = this.myclick.bind(this);

    }

    componentWillMount(){
        this.setState({select:this.props.isSelected});
    }


    myclick(){
        if (this.state.select == "false"){
            this.state.select = "true";
        }
        //告诉上级组件,当前的操作对象
        this.props.click(this);
        //console.log(this);
        window.now_index=this.props.index;//全局设置当前选中值
    }


    render(){
        let widthP = 100/parseInt(this.props.totalCount) + "%";


        if (this.props.isSelected == "true"){
            return(
                <div data-index={this.props.index} style={{width:widthP,float:"left"}} onClick={this._myclick}>
                    <div style={titleStyle}>
                        {this.props.title}
                    </div>
                    <div id={"choosed"} style={{backgroundColor:'#ff7614',height:'2px'}}>

                    </div>
                </div>
            )
        }else {

            return(
                <div data-index={this.props.index} style={{width:widthP,float:"left"}} onClick={this._myclick}>
                    <div style={titleStyle}>
                        {this.props.title}
                    </div>
                    <div style={{backgroundColor:'white',height:'1px'}}>

                    </div>
                </div>
            )
        }
    }
}

OptionItem.defaultProps = {
    isSelected: "false",
    title: "待支付",
    index:"0",
    totalCount:"1"
};

OptionItem.propTypes = {
    isSelected: React.PropTypes.string,
    title: React.PropTypes.string,
    click: React.PropTypes.func,
    totalCount: React.PropTypes.number,
    index:React.PropTypes.number
};